<template>
  <div>
	
    <!-- 北窗 -->
    <div class="window-box">
      <h4 class="text-box">北窗</h4>
      <img src="../../assets/家具-窗户.png" alt="" class="img-window" v-for="item of 4" :key="item">
    </div>
    <!-- 座位区域 -->
    <div class="btn-container" v-for="(item,index) in infoList2" :key="index">
      <div class="btn-box" v-for="(item2,site) in item" :key="site">
        <el-popover class="txt1"
                    placement="right"
                    width="600"
                    trigger="click" v-if="item2.yid%2==0">
      <el-descriptions title="学生信息">                      
        <el-descriptions-item label="姓名">{{item2.name}}</el-descriptions-item>
          <el-descriptions-item label="学号">{{item2.number}}</el-descriptions-item>
          <el-descriptions-item label="性别">
            <span v-if="item2.sex == '0'">女</span>
            <span v-else>男</span>
          </el-descriptions-item>
          <el-descriptions-item label="专业">{{item2.major}}</el-descriptions-item>
          <el-descriptions-item label="年级">{{item2.grade}}</el-descriptions-item>
          <el-descriptions-item label="现是否考研">
            <span v-if="item2.postgraduate == '0'">不考研</span>
            <span v-else>考研</span>
          </el-descriptions-item>
          <el-descriptions-item label="手机号">{{item2.tel}}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{item2.email}}</el-descriptions-item>
          <el-descriptions-item label="组号">{{item2.whichgroup}}</el-descriptions-item>  
    </el-descriptions>
      <el-button slot="reference" v-if="item2.name==null" disabled class="btnInfo">
        <img class="img-container" src="../../assets/desktop-before-1.png" alt="">
        <span>{{item2.xid}}{{item2.yid}}{{item2.zid}}</span>
      </el-button>
      <el-button slot="reference" v-else>
        <img class="img-container" src="../../assets/desktop-after-1.png" alt="">
        <span>{{item2.xid}}{{item2.yid}}{{item2.zid}}</span>
      </el-button>
    </el-popover>
    <el-popover class="txt2"
      placement="right"
      width="600"
      trigger="click" v-else>
      <el-descriptions title="学生信息">                      
        <el-descriptions-item label="姓名">{{item2.name}}</el-descriptions-item>
    <el-descriptions-item label="学号">{{item2.number}}</el-descriptions-item>
    <el-descriptions-item label="性别">
      <span v-if="item2.sex == '0'">女</span>
      <span v-else>男</span>
    </el-descriptions-item>
    <el-descriptions-item label="专业">{{item2.major}}</el-descriptions-item>
    <el-descriptions-item label="年级">{{item2.grade}}</el-descriptions-item>
    <el-descriptions-item label="现是否考研">
      <span v-if="item2.postgraduate == '0'">不考研</span>
      <span v-else>考研</span>
    </el-descriptions-item>
    <el-descriptions-item label="手机号">{{item2.tel}}</el-descriptions-item>
    <el-descriptions-item label="邮箱">{{item2.email}}</el-descriptions-item>
    <el-descriptions-item label="组号">{{item2.whichgroup}}</el-descriptions-item>
    </el-descriptions>
      <el-button slot="reference" v-if="item2.name==null" class="btnInfo" disabled>
        <span>{{item2.xid}}{{item2.yid}}{{item2.zid}}</span>
        <img class="img-container" src="../../assets/desktop-before-2.png" alt="">
      </el-button>
      <el-button slot="reference" v-else>
        <span>{{item2.xid}}{{item2.yid}}{{item2.zid}}</span>
        <img class="img-container" src="../../assets/desktop-after-2.png" alt="">
      </el-button>
    </el-popover>

      </div>
    </div>
    <!-- 走廊 -->
	<div >
      <h4 class="code1">
        东
        <img src="../../assets/door.png" alt="" class="doorFront" >
      </h4>
   <h4 class="code2"> 
    <img src="../../assets/door.png" alt="" class="doorBehind" >
    西
   </h4>   
    </div>
  </div> 
</template>

<script>
export default {
  data(){
    return{
				 infoList2:''

    }
  },
	mounted(){
    this.getInfoList()
  },
  methods:{
      async getInfoList(){
        let result = await this.$API.reqSelectStudentByYids(3)
        console.log(result.data.data)
      	this.infoList2 = result.data.data
      }
		}
	}
</script>

<style lang="less" scoped>
.img-container{
  height: 30px;
  width: 20px;
  float: left;
  margin-top: 5px;
  margin-left: 5px;
}
.btn-container{
  margin-top:30px;
  margin-left: 5px;
  float:left;
}
.btnInfo{
  pointer-events:none
}
.doorFront{
  width:60px;
  height:70px;
}
.doorBehind{
  width:60px;
  height:70px;
}
.code1{
  margin-top: 40px;
  float:left;
}
.code2{
  margin-top: 40px;
  float:right;
}
.text-box{
  text-align: center;
}
.img-window{
  margin-bottom: 5px;
  height: 60px;
  width: 80px;
  margin-left: 200px;
}
.txt1{
  margin-right: -15px;
}
.txt2{
  margin-right: 25px;
}






















	.yy1{margin: 0px;}
	.qq1{margin-left: 30px;}
	.total1{margin-left: 30px;}
.uu{margin-left: 40px;}
	.u11{
		margin-left: -10px;
		margin-top: -20px;
	}
	.t1{margin-top: 20px;}
	.u1{margin-left: 75px;
	margin-right: -150px;
	}
	.u2{margin-left: -120px;}
	.u3{margin-left: -25px;}
	.u4 {
		margin-left: -40px;
	}
	.u5{margin-left: 20px;margin-right: -30px;}
	.u6{
		margin-left: 6px;
	}
	.u7{margin-left: 30px;margin-right: -30px;}
	.u8{margin-left: 10px;}
	.u2{margin-left: -70px;}
	.q1{margin-left: 100px;margin-top: 50px;}
	.q2{margin-left: -30px;margin-top: 50px;}
	.q3{margin-left: -30px;margin-top: 50px;}
	.q4{margin-left: -30px;margin-top: 50px;}
	.q5{margin-left: -30px;margin-top: 50px;}
	.q6{margin-top: 50px;float:left;margin-left: -30px;
	}
	.q7{margin-left:-48px;margin-top: 50px;}
	.q8{margin-left: -55px;margin-top: 50px;}
	.w1{margin-top: 20px;margin-left: 100px;}
	.w2{margin-top: 20px;margin-left: -30px;}
		.w3{margin-top: 20px;margin-left: -30px;}
		.w4{margin-top: 20px;margin-left: -30px;}
		.w5{margin-top: 20px;margin-left: -30px;}
		.w6{margin-left: -30px;}
		.w7{margin-top: 20px;margin-left: -48px;}
		.w8{margin-top: 20px;margin-left: -55px;}
		.e1{margin-left: 100px;margin-top: 50px;}
		.e2{margin-top: 50px;margin-left: -30px;}
		.e3{margin-top: 50px;margin-left: -30px;}
		.e4{margin-top: 50px;margin-left: -30px;}
		.e5{margin-top: 50px;margin-left: -30px;}
		.e6{margin-top: 50px;margin-left: -30px;}
		.e7{margin-top: 50px;margin-left: -48px;}
		.e8{margin-top: 50px;margin-left: -55px;}
		.r1{margin-left: 100px;margin-top: 20px;}
		.r2{margin-left: -30px;margin-top: 20px;}
		.r3{margin-left: -30.5px;margin-top: 20px;}
		.r4{margin-left: -30px;margin-top: 20px;}
		.r5{margin-left: -30px;margin-top: 20px;}
		.r6{margin-left: -30px;margin-top: 20px;}
		.r7{margin-left: -48px;margin-top: 20px;}
		.r8{margin-left: -55px;margin-top: 20px;}
	.y{
		margin-right: -50px;
	}
  .p{
    margin-top: -10px;
  }
	.img-container4{
    transform: rotateZ(180deg);
    height: 30px;
    width: 30px;
    float: left;margin-top: 5px;
    margin-left: 15px;
}
	.img-container2{
    transform: rotateZ(-270deg);
    height: 30px;
    width: 20px;
    float: left;margin-top: 5px;
    margin-left: 15px;
  }
	.img-container1{
   transform: rotateZ(-90deg);
    height: 30px;
    width: 20px;
   margin-top: 5px;
    margin-left: 15px;
  }
	.img-container11{
	
	  height: 30px;
	  width: 15px;
	 margin-top: 5px;
	  margin-left: 15px;
	}
	.ee{
		margin-left: -300px;
	}
	.ww{
    margin-top: 20px;
	  margin-left: 10px; 
   
    margin-bottom: -20px;
	}
	.w{
		margin-left: -30px;

		margin-top: 20px;

		margin-bottom: -20px; 

	}
	.qq{
    margin-top: 10px;
   margin-left: 10px;
	}
	.x{   width: 90px;
   margin-top: 20px;

		margin-left: 40px;
	}
  .img-container{
    height: 30px;
    width: 25px;
    float: left;
    margin-top: 5px;
    margin-left: 15px;
  }
  .btn-container{
    margin-top:30px;
    margin-left: 30px;
    float:left;
  }
  .btnInfo{
    pointer-events:none
  }
  .doorFront{
    width:60px;
    height:70px;
  margin-right: 90px;
  margin-top: 1px;
  }
  .doorBehind{
    width:60px;
    height:70px;
    margin-top: 8px;
  }
  .code1{
    margin-top: 90px;
    float:left;
  }
  .code2{
    margin-top: 80px;
    float:right;
  }
  .text-box{
    text-align: center;
  }
  .img-window{
    height: 60px;
    width: 90px;
    margin-left: 200px;
  }
</style>